<template>
  <div>
    <van-nav-bar
      title="写评价"
      @click-left="goback"
      left-text="返回"
      left-arrow
      :border="false"
    >
      <template #right>
        <van-icon name="ellipsis" size="25" />
      </template>
    </van-nav-bar>
    <div>
      <van-card
        v-for="item in goodsList"
        :key="item.orderID"
        :num="item.goodsNum"
        tag="推荐"
        :price="item.GoodsPrice"
        :desc="'颜色:' + item.Color + ',尺码/版本:' + item.Size"
        :title="item.GoodName"
        :thumb="item.GoodsPic"
      />
    </div>
    <div style="margin-top: 10px">
      <van-cell-group>
        <van-cell>
          <template #title> 描述相符： </template>
          <template #right-icon>
            <van-rate
              v-model="content.Description_level"
              color="#ff5315"
              icon="like"
              void-icon="like-o"
            />
          </template>
        </van-cell>
        <van-cell>
          <template #title> 服务态度： </template>
          <template #right-icon>
            <van-rate
              v-model="content.Service_level"
              color="#ff5315"
              icon="like"
              void-icon="like-o"
            />
          </template>
        </van-cell>
        <van-cell>
          <template #title> 物流速度： </template>
          <template #right-icon>
            <van-rate
              v-model="content.process_levle"
              color="#ff5315"
              icon="like"
              void-icon="like-o"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div style="background: #fff">
      <van-field
        style="height: 130px"
        v-model="content.message"
        rows="2"
        autosize
        label=""
        type="textarea"
        maxlength="200"
        placeholder="请输入您的评价"
        show-word-limit
      />
      <van-uploader :after-read="afterRead" v-model="fileList" multiple />
    </div>
    <div>
      <div class="tibox">
        <van-button @click="Publish()" style="width: 100%" round color="#7232dd"
          >发布</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { upload } from "../utils/Fileupload";
export default {
  data() {
    return {
      content: {
        Description_level: 0,
        Service_level: 0,
        process_levle: 0,
        message: "",
        GoodsID: 0,
        userID: 0,
        Color: "",
        Size: "",
        time: "",
        userName: "",
        userPic: "",
      },
      oid: 0,

      goodsList: [],
      fileList: [],
      detailsList: {},
      list: [],
    };
  },
  created() {
    this.getGoodslist();
  },
  methods: {
    goback() {
      this.$dialog
        .confirm({
          message: "留个评价再走吧！",
          confirmButtonText: "留个吧",
          cancelButtonText: "不了",
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          this.proEdit();
        });
    },
    async proEdit() {
      let oid = this.orderID;
      let order = {
        orderState: "未评价",
        orderID: oid,
      };
      const { data: res } = await this.$http.post("editOrderState", order);

      if (res.status == 200) {
        console.log("未评价");

        window.localStorage.removeItem("orderID");
      }
      this.$router.push("/myinfo");
    },
    getview(to, from) {
      this.oid = this.$route.params.oid;
      this.getGoodslist();
    },
    async getGoodslist() {
      const { data: res } = await this.$http.get("getAllOrders", {
        params: { id: this.oid },
      });

      this.goodsList = res.data;
    },
    afterRead(file) {
      // 上传评论图片
      var that = this;
      // var formData = new FormData();
      //创建formdata对象
      // formData.append("test", file.file);
      upload.uploadChange(file, "goodsComment");
      let obj = {};
      obj.images = file.file.name;
      obj.GoodsID = that.goodsList[0].GoodsID;

      that.list.push(obj);
    },
    Publish() {
      this.addEvaluationPic();
      this.addEvaluation();
    },
    async addEvaluationPic() {
      this.list.forEach((item) => {
        item.images = this.goodsComment + item.images;
      });
      console.log(this.list);
      const { data: res } = await this.$http.post(
        "addEvaluation_pic",
        this.list
      );
      console.log(res);
    },
    addEvaluation() {
      if (this.content.message == "") {
        this.$toast.fail("评价内容不能为空哦！");
      } else {
        this.$toast.loading({
          forbidClick: true,
          message: "评论中...",
          loadingType: "spinner",
        });
        setTimeout(() => {
          this.$toast.clear();
          this.addEvaluation_ad();
        }, 1500);
      }
    },
    async addEvaluation_ad() {
      var date = new Date();
      var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
      var currentFormatDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      this.content.GoodsID = this.goodsList[0].GoodsID;
      this.content.userID = this.goodsList[0].userID;
      this.content.Color = this.goodsList[0].Color;
      this.content.Size = this.goodsList[0].Size;
      this.content.userName = this.emailLogin[0].Nickname;
      this.content.userPic = this.emailLogin[0].userImg;

      this.content.time = currentFormatDate;
      const { data: res } = await this.$http.post(
        "addEvaluation",
        this.content
      );
      console.log(res);

      if (res.status == 200) {
        this.editOrderState();
        this.content.Description_level = 0;
        this.content.Service_level = 0;
        this.content.process_levle = 0;
        this.content.message = "";
      }
    },
    async editOrderState() {
      let order = {
        orderState: "已完成",
        orderID: this.oid,
      };
      const { data: res } = await this.$http.post("editOrderState", order);
      console.log(order);

      console.log(res);
      if (res.status == 200) {
        this.$toast.success("评论成功！");
        this.fileList = [];
        this.list = [];
        this.$router.push("/myinfo");
        window.localStorage.removeItem("orderID");
      }
    },
  },
  computed: {
    ...mapState(["orderID", "OrderNum", "emailLogin"]),
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.getview(newVal, oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.tibox {
  padding: 1.875rem;
  margin-top: 1.25rem;
}
</style>
